<!--
 * @Description: 
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2022-10-27 19:25:47
 * @LastEditTime: 2022-10-27 23:09:58
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY li
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态辐射圈</title>
    <script
      charset="utf-8"
      src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"
    ></script>
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        width: 100%;
        height: 100%;
      }
      #name {
        position: absolute;
        bottom: 10px;
        right: 20px;
        font-size: 12px;
        color:#ffffff;
      }
    </style>
  </head>
  <body onload="initMap()">
    <div id="container"></div>
    <div id="name">北京市道路积水预警</div>
    <script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/beijing_pondingWarning.js"></script>
    <script>
      function initMap() {
        //初始化地图
        var map = new TMap.Map("container", {
          zoom: 11.5, //设置地图缩放级别
          center: new TMap.LatLng(39.914961477236766, 116.3898104098216), //设置地图中心点坐标
          mapStyleId: "style4", //个性化样式2
          renderOptions: {
            enableBloom: true, //泛光
          },
        });
        //初始化辐射圈
        var radiationCircle = new TMap.visualization.Radiation({
          styles: {
            style2: {
              fillColor: "rgba(29,250,242,0.9)", //辐射圈填充颜色
            },
          },
          processAnimation: {
            duration: 3000, //辐射圈半径从0到最大半径的时长，单位为ms
          },
        })
          .addTo(map)
          radiationCircle.setData(radiationData);

        //初始化散点图并添加至map图层
        var dot = new TMap.visualization.Dot({
          styles: {
            style1: {
              radius: 2, //圆形半径
            },
            style2: {
              fillColor: "rgba(29,250,242,1)", //圆形填充颜色
              radius: 3, //圆形半径
            },
          },
          enableBloom: true, // 泛光
        })
          .addTo(map)
          dot.setData(dotData); //设置数据
      }
    </script>
  </body>
</html>
